<!--
 * @描述: 
 * @作者: 约訂
 * @Date: 2024-08-23 09:16:07
 * @LastEditTime: 2024-08-28 13:39:27
 * @修改人员: 约訂
-->
<template>
  <!-- PRIV_TITTLE_CREATE 新增字典标题 - 权限表示 -->
  <div class="app-container main flex-box c-c-c">
    <div class="flex-boc l-c-s title_btn_list">
      <el-button type="primary" @click="OpenAddClassify()">新增分类</el-button>
      <!-- <el-button type="primary" @click="allOpen = !allOpen">{{
        allOpen ? "全部关闭" : "全部展开"
      }}</el-button> -->
    </div>
    <el-row class="list_box">
      <el-table
        v-loading="loading"
        height="100%"
        :data="list"
        row-key="num"
        stripe
        border
        :default-expand-all="allOpen"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <!-- <el-table-column type="index" label="#" align="center" width="200">
          <template slot-scope="scope">
            {{ scope.row.row }}
          </template>
</el-table-column> -->
        <el-table-column
          label="#"
          prop="row"
          width="130"
          class-name=" name_cell"
        >
        </el-table-column>
        <el-table-column
          label="分类名称"
          align="left"
          prop="name"
          class-name=" name_cell"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.goods == 0" class="title_b flex-box l-c-s">
              <i class="new-icon-font new-mingxinpian"></i>
              {{ scope.row.name }}
              <el-button
                type="primary"
                @click="OpenAddProducts(scope.row)"
                size="mini"
                >新增产品</el-button
              >
            </div>
            <div v-if="scope.row.goods == 1">
              <i
                class="new-icon-font new-mingxinpian"
                v-if="scope.row.children && scope.row.children.length != 0"
              ></i>
              <i class="new-icon-font new-wenjian" v-else></i>
              {{ scope.row.name }}
              <el-button
                type="success"
                @click="OpenAddCategory(scope.row)"
                size="mini"
                >新增类别</el-button
              >
            </div>
            <div v-if="scope.row.goods == 2">
              <i class="new-icon-font new-wenjian"></i>
              {{ scope.row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="200"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.goods == 0">
              <el-button
                class="edit_list_btn list_btn"
                v-permission="['PRIV_POWERS_UPDATE']"
                type="info"
                size="mini"
                @click="EditClassify(scope.row)"
                >编辑</el-button
              >
              <!--  icon="el-icon-delete" -->
              <el-button
                class="del_list_btn list_btn"
                v-permission="['PRIV_POWERS_DELETE']"
                type="danger"
                size="mini"
                @click="DeleteClassify(scope.row)"
                >删除</el-button
              >
            </div>
            <div v-else-if="scope.row.goods == 1">
              <el-button
                class="edit_list_btn list_btn"
                v-permission="['PRIV_POWERS_UPDATE']"
                type="info"
                size="mini"
                @click="EditProducts(scope.row)"
                >编辑</el-button
              >
              <!--  icon="el-icon-delete" -->
              <el-button
                class="del_list_btn list_btn"
                v-permission="['PRIV_POWERS_DELETE']"
                type="danger"
                size="mini"
                @click="DeleteProducts(scope.row)"
                >删除</el-button
              >
            </div>
            <div v-else-if="scope.row.goods == 2">
              <el-button
                class="edit_list_btn list_btn"
                v-permission="['PRIV_POWERS_UPDATE']"
                type="info"
                size="mini"
                @click="EditProductsType(scope.row)"
                >编辑</el-button
              >
              <!--  icon="el-icon-delete" -->
              <el-button
                class="del_list_btn list_btn"
                v-permission="['PRIV_POWERS_DELETE']"
                type="danger"
                size="mini"
                @click="DeleteProductsType(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <vxe-modal
      v-model="addClassify"
      width="400"
      :mask="false"
      :lockView="false"
      class="employees_box"
    >
      <template #title>
        <span>{{ classifyTitle }}</span>
      </template>
      <template #default>
        <el-form
          ref="ticketForm"
          :model="addName"
          :rules="addNameRules"
          @submit.native.prevent
          label-width="100px"
        >
          <el-row class="add_name">
            <el-form-item label="分类名称" prop="name">
              <el-input
                v-model.trim="addName.name"
                maxlength="50"
                placeholder="请输入分类名称"
                @keyup.enter.native="SubmitData()"
              />
            </el-form-item>
          </el-row>
          <el-row class="btn_name flex-box l-c-c">
            <el-button type="primary" @click="SubmitData()">确认</el-button>
            <el-button @click="addNameRules = false">取 消</el-button>
          </el-row>
        </el-form>
      </template>
    </vxe-modal>
    <vxe-modal
      v-model="addProducts"
      width="400"
      :mask="false"
      :lockView="false"
      class="employees_box"
    >
      <template #title>
        <span>{{ productsTitle }}</span>
      </template>
      <template #default>
        <el-form
          ref="ticketProductsForm"
          :model="newProducts"
          :rules="newProductsRules"
          label-width="100px"
          @submit.native.prevent
        >
          <el-row class="add_name">
            <el-form-item
              label="产品名称"
              prop="name"
              @keyup.enter.native="SubmitProductsData()"
            >
              <el-input
                v-model.trim="newProducts.name"
                maxlength="50"
                placeholder="请输入产品名称"
              />
            </el-form-item>
          </el-row>
          <el-row class="btn_name flex-box l-c-c">
            <el-button type="primary" @click="SubmitProductsData()"
              >确认</el-button
            >
            <el-button @click="addProducts = false">取 消</el-button>
          </el-row>
        </el-form>
      </template>
    </vxe-modal>

    <vxe-modal
      v-model="addCategory"
      width="400"
      :mask="false"
      :lockView="false"
      class="employees_box"
    >
      <template #title>
        <span>{{ addCategoryTitle }}</span>
      </template>
      <template #default>
        <el-form
          ref="ticketCategoryForm"
          :model="addCategoryData"
          :rules="addCategoryDataRules"
          label-width="100px"
          @submit.native.prevent
        >
          <el-row class="add_name">
            <el-form-item
              label="产品类别"
              prop="name"
              @keyup.enter.native="SubmitCategoryData()"
            >
              <el-input
                v-model.trim="addCategoryData.name"
                maxlength="50"
                placeholder="请输入产品名称"
              />
            </el-form-item>
          </el-row>
          <el-row class="btn_name flex-box l-c-c">
            <el-button type="primary" @click="SubmitCategoryData()"
              >确认</el-button
            >
            <el-button @click="addCategory = false">取 消</el-button>
          </el-row>
        </el-form>
      </template>
    </vxe-modal>
  </div>
</template>

<script type="javascript/text">
import {
  getClassify,
  addClassify,
  editClassify,
  delClassify,
  addProductsOne,
  getProductsOne,
  editProductsOne,
  delProductsOne,
  addCategoryOne,
  getCategoryOne,
  editCategoryOne,
  delCategoryOne,
} from "@/api/products/classify";
import { Edit } from "vxe-table";
import H5Box from "../../../components/H5Box/H5Box.vue";
export default {
  components: { H5Box },
  data() {
    return {
      allOpen: false,
      /**分类树形数据 */
      list: [],
      loading: true,
      /**新增分类开关 */
      addClassify: false,
      /**弹窗名称 */
      classifyTitle: "新增分类",
      /**新增数据 */
      addName: {
        name: "",
      },
      /**新增校验 */
      addNameRules: {
        name: [{ required: true, message: "分类名称不能为空", trigger: "blur" }],
      },
      /**产品对话框 */
      addProducts: false,
      /**对话框标题 */
      productsTitle: "新增产品",
      /**产品信息 */
      newProducts: {
        name: "",
        categoryID: null
      },
      newProductsRules: {
        name: [{ required: true, message: "产品名称不能为空", trigger: "blur" }],
      },
      addCategoryDataRules:{
name: [{ required: true, message: "类别名称不能为空", trigger: "blur" }],
      },
      /**新增类别开关 */
      addCategory: false,
      /**新增类别参数 */
      addCategoryData: {
        name: "",
        productID: 0
      },
      /**类别的新僧编辑标题 */
      addCategoryTitle :'新增类别'
    };
  },
  methods: {
    /**获取树形数据 */
    async GetList() {
      this.loading = true
      let { data, statusCode } = await getClassify();
      if (statusCode != 200) return;
      this.loading = false
      let index = 1
      const addIndex = (list, goods, rowP = null) => {
        let row = 1
        list.forEach(element => {
          element.num = index
          element.goods = goods
          if (rowP) {
            element.row = rowP + "-" + row
          } else {
            element.row = row
          }
          row++
          index++
          if (element.children && element.children.length != 0) {
            addIndex(element.children, goods + 1, element.row)
          }
        });
      }
      addIndex(data, 0)
      this.list = data
    },
    /**打开新增分类 */
    OpenAddClassify() {
      this.classifyTitle = "新增分类"
      this.addName.name = ""
      this.addClassify = true
    },
    /**编辑分类名称 */
    EditClassify(row) {
      this.classifyTitle = "编辑分类"
      this.addName.name = row.name
      this.addName.id = row.id
      this.addClassify = true
    },
    /**提交确认 */
    SubmitData() {
      if (this.classifyTitle == "新增分类") {
        this.$refs.ticketForm.validate(async (valid) => {
          if (valid) {
            let { statusCode } = await addClassify(this.addName);
            if (statusCode != 200) return;
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.addClassify = false;
            this.addName = {
              name: "",
            };
            this.GetList();
          }
        });
      } else if (this.classifyTitle == "编辑分类") {
        this.$refs.ticketForm.validate(async (valid) => {
          if (valid) {
            let { statusCode } = await editClassify(this.addName);
            if (statusCode != 200) return;
            this.$message({
              message: "编辑成功",
              type: "success",
            });
            this.addClassify = false;
            this.addName = {
              name: "",
            };
            this.GetList();
          }
        });
      }
    },
    /**删除分类 */
    DeleteClassify(row) {
      this.$confirm(
        `此操作将永久删除该分类数据（${row.name}）, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          let { statusCode } = await delClassify(row.id);
          if (statusCode != 200) return;
          this.$message({
            message: "删除成功",
            type: "success",
            center: true,
          });
          this.GetList();
        })
        .catch(() => {
          this.GetList();
        });

    },
    /**打开新增产品 */
    OpenAddProducts(row) {
      this.newProducts = {
        name: "",
        categoryID: row.id
      }
      this.productsTitle = "新增产品"
      this.addProducts = true
    },
    /**打开编辑产品 */
    async EditProducts(row) {
      let { data, statusCode } = await getProductsOne(row.id)
      if (statusCode != 200) return;
      console.log(data);
      this.newProducts = {
        name: data.name,
        categoryID: data.categoryID,
        id: data.id
      }
      this.productsTitle = "编辑产品"
      this.addProducts = true
    },
    /**删除产品 */
    DeleteProducts(row) {
      this.$confirm(
        `此操作将永久删除该产品数据（${row.name}）, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          let { statusCode } = await delProductsOne(row.id);
          if (statusCode != 200) return;
          this.$message({
            message: "删除成功",
            type: "success",
            center: true,
          });
          this.GetList();
        })
        .catch(() => {
          this.GetList();
        });

    },
    SubmitProductsData() {
      this.$refs.ticketProductsForm.validate(async (valid) => {

        if (valid) {
          if (this.productsTitle == "新增产品") {
            let { statusCode } = await addProductsOne(this.newProducts);
            if (statusCode != 200) return;
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.addProducts = false;
            this.newProducts = {
              name: "",
              categoryID: null
            };
            this.GetList();
          } else if (this.productsTitle == "编辑产品") {
            let { statusCode } = await editProductsOne(this.newProducts);
            if (statusCode != 200) return;
            this.$message({
              message: "编辑成功",
              type: "success",
            });
            this.addProducts = false;
            this.newProducts = {
              name: "",
              categoryID: null
            };
            this.GetList();
          }

        }
      });

    },
    /**打开新增类别 */
    OpenAddCategory(row) {
      this.addCategoryData.name = ""
      this.addCategoryData.productID = row.id
      this.addCategoryTitle = "新增产品类别"
      this.addCategory = true
    },
    /**编辑产品类别 */
  async  EditProductsType(row) {
 let { data, statusCode } = await getCategoryOne(row.id)
      if (statusCode != 200) return;
      this.addCategoryData = {
        name: data.name,
        productID: data.productID,
        id: data.id
      }
      this.addCategoryTitle = "编辑产品类别"
      this.addCategory = true
    },
    /**删除产品类别 */
    DeleteProductsType(row) {
this.$confirm(
        `此操作将永久删除该产品分类数据（${row.name}）, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          let { statusCode } = await delCategoryOne(row.id);
          if (statusCode != 200) return;
          this.$message({
            message: "删除成功",
            type: "success",
            center: true,
          });
          this.GetList();
        })
        .catch(() => {
          this.GetList();
        });
    },
    /**确认类别 */
     SubmitCategoryData() {
      this.$refs.ticketCategoryForm.validate(async (valid) => {
        if (valid) {
          if (this.addCategoryTitle == "新增产品类别") {
            let { statusCode } = await addCategoryOne(this.addCategoryData);
            if (statusCode != 200) return;
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.addCategory = false;
            this.addCategoryData = {
              name: "",
              productID: null
            };
            this.GetList();
          } else if (this.addCategoryTitle == "编辑产品类别") {
            let { statusCode } = await editCategoryOne(this.addCategoryData);
            if (statusCode != 200) return;
            this.$message({
              message: "编辑成功",
              type: "success",
            });
            this.addCategory = false;
            this.addCategoryData = {
              name: "",
              productID: null
            };
            this.GetList();
          }

        }
      });
    }
  },
  created() {
    this.GetList()
  },
  mounted() { },
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
